<template>
  <div v-if="endlessKanvasScene" class="zoom-buttons">
    <q-img class="background" src="sprite/blockWithCroppedCorners_109x37.png" width='144px'>

      <div class="container">
        <q-img class=" image-button" src="sprite/minus_150x150.png" @click="zoomOut" width='24px' />
        <div class='zoom-text' :style='{ "font-size": FONT_SMALL }'>{{ zoomPercentage }}</div>
        <q-img class=" image-button" src="sprite/plus_150x150.png" @click="zoomIn" width='24px' />


      </div>
    </q-img>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { usePhaserStore } from '../../stores/phaserStore';
import { mapState } from 'pinia';
import { updateZoom } from '../../apps/spaces-2d/zoomButtonsAndOther';
import { ZOOM_STEP, FONT_SMALL } from '../../apps/kanbans/Const';

export default defineComponent({
  name: 'fullscreenButton',
  setup() {
    return {
      FONT_SMALL
    };
  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene', 'zoomPercentage']),

  },
  methods: {
    zoomIn() { updateZoom(this.endlessKanvasScene, ZOOM_STEP); },
    zoomOut() { updateZoom(this.endlessKanvasScene, -ZOOM_STEP); },

  }

});
</script>
<style scoped>
.zoom-buttons {
  /* border: dotted greenyellow; */
  width: 144px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  background: transparent
}

.zoom-text {
  color: black;
  font-weight: 700;

}

.image-button {
  cursor: pointer;
  pointer-events: initial;
}



.glow-effect {
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.9);

  /* Пример стиля "glow" */
}
</style>
